<template>
  <!-- 导航条 codeBy Dias Software Inc. -->
  <section style="width:100%;">
    <div @mouseleave="initChildrenHandle" class="menuBigBoxClass">
      <div class="naviBarBoxClass justify-center align-center"
        :style="'background:rgba(255,255,255,' + naviOpacity + ');'">
        <div class="naviCoreBoxClass justify-between align-start">
          <div class="naviItemBoxClass justify-start align-center">
            <div class="naviItemClass justify-start align-center">
              <div class="menuBoxClass" v-for="(menu, mi) in data" :key="mi">
                <nuxt-link v-if="menu.class_ispage" :to="{ path: menu.class_router, query: { id: menu.id } }"><span>{{
                  menu.class_title }}</span></nuxt-link>
                <span v-else>{{ menu.class_title }}</span>
              </div>
            </div>
            <div class="searchBox">
              <vs-input shadow primary type="text" v-model="keywords" label-placeholder="请输入搜索关键字" icon-after
                @click-icon="searchHandler">
                <template #icon>
                  <i class='bx bx-search'></i>
                </template>
              </vs-input>
            </div>
          </div>
          <div v-if="$store.state.userinfos.email" class="naviUserInfoBoxClass flex justify-end align-center">
            <span @click="logoutHandler" class="exitClass">退出</span>
            <span>{{ $store.state.userinfos.nickname }}</span>
            <vs-avatar @click="gotoMemberHandler" history history-gradient circle>
              <img v-lazy="$store.state.userinfos.avator" :alt="$store.state.userinfos.nickname">
            </vs-avatar>
          </div>

        </div>
      </div>
      <div class="chirdrenBoxClass">
        <div class="menuChirdrenBoxClass">
          <div v-for="m in data" :key="m.id" class="chirdrenItemBoxClass"
            :style="'background:rgba(255,255,255,' + naviOpacity + ');'">
            <ul>
              <li v-for="c in m.children" :key="c.id">
                <nuxt-link :to="{ path: c.class_router, query: { id: c.id } }"><span>{{ c.class_title
                }}</span></nuxt-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="mobleBigBoxClass" :style="'background:rgba(255,255,255,' + naviOpacity + ');'">
      <div class="mLogoBoxClass justify-between align-center">
        <div class="menuControlClass justify-between align-center">
          <div class="mobileCoreBox flex justify-start align-center">
            <svg @click="showMenuStatus = !showMenuStatus" class="icon mainIcon" aria-hidden="true">
              <use xlink:href="#icon-icon-test"></use>
            </svg>
            <nuxt-link to="/">
              <h2>欽天監</h2>
            </nuxt-link>
          </div>
          <div class="searchBox">
            <vs-input @keyup.enter.native="searchHandler" shadow primary type="text" v-model="keywords"
              label-placeholder="请输入搜索关键字" icon-after @click-icon="searchHandler">
              <template #icon>
                <i class='bx bx-search'></i>
              </template>
            </vs-input>
          </div>
        </div>
        <div class="mLoginBoxClass justify-end align-center">
          <nuxt-link v-if="$store.state.userinfos.email" to="/member">
            <vs-avatar size="35">
              <img
                v-lazy="$store.state.userinfos.avator || 'http://oss.dsnbc.com/images/20210403/d9598330ec04e9dd8896844084579f7d.png'">
            </vs-avatar>
          </nuxt-link>
          <vs-button-group v-else>
            <vs-button @click="openRouterHandler('/login')" flat icon>
              <i class='bx bxs-user-circle bx-icon'></i>
              <!-- <span style="font-size: 14px;">登录</span> -->
            </vs-button>
            <vs-button @click="openRouterHandler('/register')" flat icon>
              <i class='bx bxs-user-plus bx-icon'></i>
              <!-- <span style="font-size: 14px;">注册</span> -->
            </vs-button>
          </vs-button-group>
        </div>
      </div>
      <div :style="showMenuStatus ? 'height:calc(100vh - 4rem);' : 'padding:0;'" class="mMenuBoxClass">
        <div v-for="mm in data" :key="mm.id" class="mMenuItemBoxClass">
          <div @click="bMenuHandle(mm)" class="mMenuCoreBoxClass justify-between align-center">
            <div class="mMenuNameClass justify-start align-center">
              <img v-lazy="mm.class_icon" :title="mm.class_title">
              <span>{{ mm.class_title }}</span>
            </div>
            <div class="menu-arr-class">
              <img v-if="mm.children" src="~/assets/images/arr.png">
            </div>
          </div>
          <div class="mCMenuItemBoxClass">
            <ul>
              <li @click="lMenuHandle(cm)" class="justify-start align-center" v-for="cm in mm.children" :key="cm.id">
                {{ cm.class_title }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { Ads } from '~/assets/inc/tencentAds';
export default {
  props: {
    webconfig: {
      type: Object,
      default: {}
    },
    data: {
      type: Array,
      default: []
    }
  },
  watch: {
    themeStatus: 'changeThemeHandle',
  },
  data() {
    return {
      naviOpacity: 0.1,
      active: false,
      showMenuStatus: false,
      themeStatus: false,
      Ads: Ads,
      keywords: '',
    }
  },
  mounted() {
    if (window.localStorage.getItem('userinfo')) {
      this.$store.commit('setUserInfos', JSON.parse(window.localStorage.getItem('userinfo')));
    }
    if (window.localStorage.getItem('black')) {
      this.themeStatus = true;
    } else {
      this.themeStatus = false;
    }
    this.$nextTick(() => {
      this.listenScroll();
      this.menuMouseHandle();
      this.isMobile();
      this.mobileMenuMouseHandle();
      this.scaleMinHandle();
    })
  },
  methods: {
    //跳转个人中心
    gotoMemberHandler() {
      this.$router.push({ path: '/member' });
    },
    //搜索事件
    searchHandler() {
      if (!this.keywords) {
        this.$vs.notification({
          progress: 'auto',
          color: 'danger',
          position: 'bottom-center',
          title: 'Web Message!',
          text: "请输入搜索关键字"
        })
        return;
      }
      this.$router.push({ path: `/search?keywords=${this.keywords}` })
    },
    //跳转路由
    openRouterHandler(e) {
      this.$router.push({ path: e })
    },
    //退出登录
    logoutHandler() {
      this.$store.commit('setLoading', true);
      localStorage.clear();
      this.$store.commit('setUserInfos', {});
      this.$router.replace({ path: '/' })
      this.$store.commit('setLoading', false);
    },
    //切换黑白模式
    changeThemeHandle() {
      this.$store.commit('setThemeStatus', this.themeStatus);
      if (this.$store.state.themeStatus) {
        $('html').addClass('blackTheme');
        window.localStorage.setItem('black', true);
      } else {
        $('html').removeClass('blackTheme');
        window.localStorage.removeItem('black');
      }
    },
    //选中大菜单
    bMenuHandle(_data) {
      let _url = _data.class_router + '?id=' + _data.id;
      if (_data.class_ispage) {
        this.showMenuStatus = false;
        this.$router.push({ path: _url });
      }
    },
    //选中子菜单
    lMenuHandle(_data) {
      let _url = _data.class_router + '?id=' + _data.id;
      if (_url) {
        this.showMenuStatus = false;
        this.$router.push({ path: _url });
      }
    },
    //切换屏幕分辨率
    isMobile() {
      var deviceWidth = $(window).width();
      $(window).resize(function () {
        console.log(deviceWidth)
      })
    },
    //菜单事件
    menuMouseHandle() {
      let _this = this;
      $(function () {
        $('.menuBoxClass').each(function (index) {
          $(this).hover(function () {
            _this.initChildrenHandle();
            $('.chirdrenItemBoxClass').eq(index).slideToggle(0, () => {
              $('.menuChirdrenBoxClass').css({ 'paddingLeft': ($(this).offset().left) - (($('.menuChirdrenBoxClass').offset().left) + 10) + 'px' })
            });
          })
        })
      })
    },
    initChildrenHandle() {
      for (let i in $('.chirdrenItemBoxClass')) {
        $('.chirdrenItemBoxClass').eq(i).hide(0, () => { });
      }
    },
    //监听滚动条
    listenScroll() {
      window.addEventListener('scroll', () => {
        this.naviOpacity = (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop) > 1 ? 0.9 : (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop)
      })
    },
    //移动端菜单事件
    mobileMenuMouseHandle() {
      let _this = this;
      $(function () {
        $('.mMenuCoreBoxClass').each(function (index) {
          $(this).click(function () {
            _this.scaleMinHandle(index);
            $('.mCMenuItemBoxClass').eq(index).slideToggle(300, () => {
              if (!$('.mCMenuItemBoxClass').eq(index).is(':visible')) {
                $('.menu-arr-class').eq(index).removeClass('arr-round-class');
              } else {
                $('.menu-arr-class').eq(index).addClass('arr-round-class');
              }
            });
          })
        })
      })
    },
    //收起全部展开的菜单
    scaleMinHandle(index) {
      for (let i in $('.mMenuCoreBoxClass')) {
        if (index != i) {
          $('.mCMenuItemBoxClass').eq(i).hide(300, () => {
            if (!$('.mCMenuItemBoxClass').eq(i).is(':visible')) {
              $('.menu-arr-class').eq(i).removeClass('arr-round-class');
            }
          });
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.menuBigBoxClass {
  width: 100%;
  clear: both;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
  transition: .5s all ease;

  .naviBarBoxClass {
    width: 100%;
    height: 50px;
    background: transparent;
    display: flex;
    z-index: 999;
    transition: .5s all ease;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba($color: #868686, $alpha: 0.1);
    margin-top: -4px;

    .naviCoreBoxClass {
      width: 1200px;
      height: 50px;
      color: var(--black);
      display: flex;

      .naviItemBoxClass {
        flex: 1 1 auto;
        height: 100%;
        display: flex;
        padding: 0 20px 0 0;

        .logoBoxClass {
          flex: 0 0 auto;
          height: 100%;
          display: flex;

          img {
            width: auto;
            height: 30px;
          }

          .companyNameClass {
            display: flex;
            padding-left: 10px;
            font-size: 18px;
            color: var(--black);
            // text-shadow: 5px 1px 6px rgb(53, 53, 53);
            font-weight: bold;
          }
        }

        .naviItemClass {
          flex: 1 1 auto;
          height: 100%;
          display: flex;
          font-size: 14px;
          padding-left: 20px;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .menuBoxClass {
            flex: 0 0 auto;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 10px;
            position: relative;
            transition: .5s all ease;
            color: var(--black);

            // text-shadow: 5px 1px 6px rgb(53, 53, 53);
            span {
              color: var(--black);
              font-weight: bold;

              &:hover {
                cursor: pointer;
                color: black;
              }
            }

            &:hover {
              cursor: pointer;
              color: black;
            }
          }
        }

        .searchBox {
          width: 150px;
          height: 33px;
          border-radius: 50px;
          cursor: pointer;
          transition: 1s all ease;

          &:hover {
            width: 250px;
          }
        }
      }

      .naviUserInfoBoxClass {
        flex: 0 0 auto;
        height: 100%;

        .exitClass {
          font-weight: lighter;

          &:hover {
            color: black;
            cursor: pointer;
          }
        }

        span {
          padding-right: 10px;
          font-size: 14px;
        }
      }

      .naviUserActionBoxClass {
        flex: 0 0 auto;
        height: 100%;
        display: flex;

        span {
          font-size: 14px;
          cursor: pointer;
          transition: .5s all ease;
          color: var(--black);
          text-shadow: 5px 1px 6px rgb(53, 53, 53);

          &:hover {
            color: black;
          }
        }
      }
    }
  }

  .chirdrenBoxClass {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    transition: .5s all ease;

    .menuChirdrenBoxClass {
      width: 1200px;
      transition: .5s all ease;
      color: var(--black);

      .chirdrenItemBoxClass {
        width: 100%;
        padding-bottom: 10px;
        transition: .5s all ease;
        display: none;
        backdrop-filter: blur(10px);
        padding-left: 20px;
        border-radius: 0 0 10px 10px;
        border: 1px solid rgba($color: #868686, $alpha: 0.1);
        border-top: none;

        ul {
          width: 100%;
          height: 100%;

          li {
            width: 100%;
            height: 30px;
            list-style: none;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-size: 14px;
            cursor: pointer;

            span {
              color: var(--black);
              height: 30px;
              border-bottom: 1px solid transparent;
              text-decoration: none !important;

              &:hover {
                color: black;
              }
            }
          }
        }
      }
    }
  }
}

.mobleBigBoxClass {
  display: none;
}

@media screen and (min-width:0px) and (max-width:1280px) {
  .menuBigBoxClass {
    display: none;
  }

  .mobleBigBoxClass {
    display: block;
    width: 100%;
    max-width: 100vw;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9999;
    padding: 0 1rem;
    transition: .5s all ease;
    backdrop-filter: blur(10px);

    .mLogoBoxClass {
      width: 100%;
      display: flex;
      padding: 1rem 0;

      .menuControlClass {
        flex: 1 1 auto;
        display: flex;
        padding: 0 2rem 0 0;

        .mobileCoreBox {
          flex: 0 0 auto;

          .mainIcon {
            width: 2rem;
            height: 2rem;
          }

          h2 {
            padding-left: 10px;
            color: var(--black);
          }
        }

        .searchBox {
          width: 15rem;
          height: 33px;
          cursor: pointer;
          transition: 1s all ease;
          color: var(--black);

          &:hover {
            flex: 1 1 auto;
            width: auto;
            padding-left: 2rem;
          }
        }
      }

      .mLoginBoxClass {
        flex: 0 0 auto;
        display: flex;
        color: var(--black);
        font-size: 1.4rem;
        // text-shadow: 5px 1px 6px rgb(20, 20, 20);
      }
    }

    .mMenuBoxClass {
      width: 100%;
      padding: 0.5rem;
      color: var(--black);
      height: 0;
      transition: 0.5s all ease;
      overflow-y: auto;

      .mMenuItemBoxClass {
        flex: 0 0 auto;
        font-size: 1.4rem;
        font-weight: bold;

        .mMenuCoreBoxClass {
          width: 100%;
          height: 4rem;
          display: flex;

          .mMenuNameClass {
            display: flex;

            img {
              width: 2rem;
              margin-right: 0.5rem;
            }
          }

          .menu-arr-class {
            width: 1.5rem;
            height: 1.5rem;

            img {
              width: 100%;
              height: 100%;
              transition: 0.5s all ease;
            }
          }

          .arr-round-class {
            img {
              transform: rotate(90deg);
            }
          }
        }

        .mCMenuItemBoxClass {
          width: 100%;

          ul {
            width: 100%;

            li {
              list-style: none;
              height: 4rem;
              display: flex;
              padding-left: 2.5rem;
              color: var(--black);
              // text-shadow: 5px 1px 6px rgb(20, 20, 20);
            }
          }
        }
      }
    }

    .show {
      display: block;
    }
  }
}
</style>
<style lang="scss">
/deep/.content-tooltip {
  width: 100%;

  /deep/.mineItemBoxClass {
    height: 30px;
    display: flex;
    color: white;
    // text-shadow: 5px 1px 6px rgb(53, 53, 53);
  }
}
</style>